//设置高度
var height = window.innerHeight -60;
$('.bg').css('height',height)
// 车辆状态
var carStateHeight=$('.body-left').height()-85;
console.log(carStateHeight)
$('#car_state').height(carStateHeight/2)
var car_state = echarts.init(document.getElementById('car_state'));
option = {
    title : {
        text: '车辆状态',
        // subtext: '纯属虚构',
        x:'center',
        textStyle: {
            color: '#83c7e3'
        },
        "top": "4%"
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
   
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'报废'},
                {value:310, name:'编制内'},
                {value:234, name:'编制外'},
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ],
    color: [
        '#c8efff',
        '#52cdd5',
        '#79d9f1',
        // '#a7e7ff',
        // '#00acee'
    ]
};
   // 使用刚指定的配置项和数据显示图表。
   car_state.setOption(option);
//车辆用途
var carUseHeight=$('.body-left').height()-84;
   console.log(carStateHeight)
   $('#car_use').height(carUseHeight/2)
   var car_use = echarts.init(document.getElementById('car_use'));
   
option1 = {
    title : {
        text: '车辆用途',
        // subtext: '纯属虚构',
        x:'center',
        textStyle: {
            color: '#83c7e3'
        },
        "top": "4%"
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // legend: {
    //     orient: 'vertical',
    //     left: 'left',
    //     data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    // },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
                {value:335, name:'执法执勤用车'},
                {value:310, name:'特种专业技术用车'},
                {value:234, name:'机要通信用车'},
                {value:135, name:'应急保障用车'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ],
    color: [
        '#c8efff',
        '#52cdd5',
        '#79d9f1',
        '#a7e7ff',
        // '#00acee'
    ]
};
   // 使用刚指定的配置项和数据显示图表。
   car_use.setOption(option1);

   let mapHeight= $('#myChart').parent().height();
   $('#myChart').height(mapHeight)
   console.log(mapHeight)
//地图
var myChart= echarts.init(document.getElementById('myChart'));

var uploadedDataURL = "{$static_dir}/assets/json/data-1509940365453-SkScnUTCW.json";
myChart.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
    echarts.registerMap('jiangxi', geoJson);
    myChart.hideLoading();
    var geoCoordMap = {
        '赣州市':[114.940278,25.85097],
        '吉安市':[114.986373,27.111699],
        '上饶市':[117.971185,28.44442],
        '九江市':[115.992811,29.712034],
        '抚州市':[116.358351,27.98385],
        '宜春市':[114.391136,27.8043],
        '南昌市':[115.892151,28.676493],
        '景德镇市':[117.214664,29.29256],
        '萍乡市':[113.852186,27.622946],
        '鹰潭市':[117.033838,28.238638],
        '新余市':[114.930835,27.810834],
    }
    var data = [
        {name: '赣州市', value: 199},
        {name: '吉安市', value: 39},
        {name: '上饶市', value: 152},
        {name: '九江市', value: 299},
        {name: '抚州市', value: 89},
        {name: '宜春市', value: 52},
        {name: '南昌市', value: 359},
        {name: '景德镇市', value: 52},
        {name: '萍乡市', value: 99},
        {name: '鹰潭市', value: 39},
        {name: '新余市', value: 40},
    ];
    var max = 480, min = 9; // todo 
    var maxSize4Pin = 100, minSize4Pin = 20;

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};


    option2 = {
        // title: {
        //     // text: '“绿色金融” - 江西省',
        //     subtext: '',
        //     x: 'center',
        //     textStyle: {
        //         color: '#ccc'
        //     }
        // },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
              if(typeof(params.value)[2] == "undefined"){
              	return params.name + ' : ' + params.value;
              }else{
              	return params.name + ' : ' + params.value[2];
              }
            }
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x: 'right',
            data: ['切换显示地名'],
            textStyle: {
                color: '#fff'
            }
        },
        visualMap: {
            show: false,
            min: 0,
            max: 500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
                // color: ['#3B5077', '#031525'] // 蓝黑
                // color: ['#ffc0cb', '#800080'] // 红紫
                // color: ['#3C3B3F', '#605C3C'] // 黑绿
                color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                // color: ['#23074d', '#cc5333'] // 紫红
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#1488CC', '#2B32B2'] // 浅蓝
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿

            }
        },
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //             dataView: {readOnly: false},
        //             restore: {},
        //             saveAsImage: {}
        //             }
        // },
        geo: {
            show: true,
            map: 'jiangxi',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7',
                }
            }
        },
        series : [
      {
            name: 'credit_pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9'
                }
            }
        },
         {
            type: 'map',
            map: 'jiangxi',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7'
                }
            },
            animation: false,
            data: data
        },
        {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: function (val) {
                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                var b = minSize4Pin - a*min;
                b = maxSize4Pin - a*max;
                return a*val[2]+b;
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 9,
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: '#F62157', //标志颜色
                }
            },
            zlevel: 6,
            data: convertData(data),
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 5)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9',
                    shadowBlur: 10,
                    shadowColor: '#05C3F9'
                }
            },
            zlevel: 1
        },
         
    ]
    };
   
    myChart.setOption(option2);
});
//其他费用
var rightH=$('.body-left').height()-47;
$('#bill').height(rightH/3)
var bill = echarts.init(document.getElementById('bill'));
option3 = {
    title: {
         text: '本年度车辆费用统计',
        //  subtext: '单位:万元',
         x: 'center',
         textStyle: {
            color: '#83c7e3'
        },
        "top": "4%"
     },
     color: ['#3398DB'],
     tooltip : {
         trigger: 'axis',
         axisPointer : {            // 坐标轴指示器，坐标轴触发有效
             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
         }
     },
     grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
     },
     xAxis : [
         {
             type : 'category',
             data : ['维保费', '年检费', '油费', '保险费', '其他费用'],
             axisTick: {
                 alignWithLabel: true
             },
             "axisLine": {
                lineStyle: {
                    color: '#fff'
                }
            },
         }
     ],
     yAxis : [
         {
             type : 'value',
             name:'单位:万元',
             "axisLine": {
                lineStyle: {
                    color: '#fff'
                }
            },
         }
     ],
     series : [
         {
             name:'今年费用',
             type:'bar',
             barWidth: '60%',
             data:[38805, 15502, 25452,19001, 39950],
             "itemStyle": {
                "normal": {
                    "color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        "offset": 0,
                        "color": "#83bff6" // 0% 处的颜色
                    }, {
                        "offset": 1,
                        "color": "#2378f7" // 100% 处的颜色
                    }], false)
                }
            }
         },
         
     ]
 };
  // 使用刚指定的配置项和数据显示图表。
  bill.setOption(option3);

//   车辆数量

$('#cars').height(rightH/3)
$('#oilCost').height(rightH/3)
var cars = echarts.init(document.getElementById('cars'));
var appusage_data = [ 
    {
    name: "5",
    value: 5
}, {
    name: "17",
    value: 17
}, {
    name: "550",
    value: 550
}, {
    name: "577",
    value: 577
}];
option4 = {
    "title": {
        "text": "车辆统计",
        'x':'center',
        "textStyle": {
            "color": "#83c7e3",
            "fontWeight": "bold",
        },
        "top": "4%",
       
    },
    "tooltip": {
        "trigger": "axis",
        "axisPointer": { // 坐标轴指示器，坐标轴触发有效
            "type": "shadow" // 默认为直线，可选为："line" | "shadow"
        }
    },
    "grid": {
        "left": "3%",
        "right": "10%",
        "bottom": "3%",
        "containLabel": true
    },
    "yAxis": [{
        "type": "category",
        "data": ["发生事故次数", "公务车数量", "自有车辆数量","车辆总数 "],
        "axisLine": {
            "show": false
        },
        "axisTick": {
            "show": false,
            "alignWithLabel": true
        },
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            }
        }
    }],
    "xAxis": [{
        "type": "value",
        "axisLine": {
            "show": false
        },
        "axisTick": {
            "show": false
        },
        "axisLabel": {
            "show": false
        },
        "splitLine": {
            "show": false
        }
    }],

    "series": [{
        "name": "数量",
        "type": "bar",
        "data": appusage_data,
        "barCategoryGap": "35%",
        "label": {
            "normal": {
                "show": true,
                "position": "right",
                "formatter": function(params) {
                    return params.data.name;
                },
                "textStyle": {
                    "color": "#bcbfff" //color of value
                }
            }
        },
        "itemStyle": {
            "normal": {
                "color": new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    "offset": 0,
                    "color": "#ec2e85" // 0% 处的颜色
                }, {
                    "offset": 1,
                    "color": "#ffb069" // 100% 处的颜色
                }], false)
            }
        }
    }]
};
cars.setOption(option4)
Load();

// 百公里
var oilCost = echarts.init(document.getElementById('oilCost'));
ajax(api.car.stat,{},'post').done((res)=>{
	Load(1)
	$('span').each(function(){
		if($(this).data('check')){
			$(this).html(res.data[$(this).data('check')])
		}
	})
	var oil_litre=[]
	var oil_price=[]
	for(var key in res.data.oil_litre){
		oil_litre.push(res.data.oil_litre[key]+100000*Math.random())
	}
	for(var key in res.data.oil_price){
		oil_price.push(Number(res.data.oil_price[key])+150000*Math.random())
	}
	console.log(oil_litre)
	console.log(oil_price)
	
	 var  options ={
    tooltip: {
        trigger: 'axis'
    },

    legend: {
        data: ['百公里花费', '百公里油耗'],
        textStyle:{color:"#fff"}
    },
     grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
     },
    xAxis: [{
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        "axisLabel": {
            "textStyle": {
                "color": "#fff"
            }
        },
        "axisLine": {
            lineStyle: {
                color: '#fff'
            }
        },
    }],
    yAxis: [{
            type: 'value',
            name: '油量',
            min: 0,
            max: 200000,
            interval: 20000,
            axisLabel: {
                formatter: '{value} L'
            },
            "axisLabel": {
                "textStyle": {
                    "color": "#fff"
                }
            },
            "axisLine": {
                lineStyle: {
                    color: '#fff'
                }
            },
        },
        {
            type: 'value',
            name:'费用',
            color:"#fff",
            min: 0,
            max: 200000,
            interval: 20000,
            axisLabel: {
                formatter: '{value} 元'
            },
            "axisLabel": {
                "textStyle": {
                    "color": "#fff"
                }
            },
            "axisLine": {
                lineStyle: {
                    color: '#fff'
                }
            },
        }
    ],
    series: [{
            name: '百公里花费',
            type: 'line',
            data: oil_price
        },
        {
            name: '百公里油耗',
            type: 'line',
            yAxisIndex: 1,
            data: oil_litre
        }
    ],
    color: [
        '#f00',
        '#2378f7'
    ]

};
   // 使用刚指定的配置项和数据显示图表。
   oilCost.setOption(options);
	
}).fail(()=>{})
//时间
newTimer()
var slidint;
    function newTimer() {
      stopit();
      var today;
      today = new Date();
      var str = today.toLocaleDateString();
      str += "  " + week();
      str += "  " + today.toLocaleTimeString();
      var o = document.getElementById("DateTime");
      o.innerHTML = str;
      slidint = setTimeout(newTimer, 1000);
    }
      
    function stopit() {
      clearTimeout(slidint);
    }
      
    function week() {
      var d, day, x, s = " ";
      var x = new Array("星期日", "星期一", "星期二");
      var x = x.concat("星期三", "星期四", "星期五");
      var x = x.concat("星期六");
      d = new Date();
      day = d.getDay();
      return (s += x[day]);
    }
      
    window.onload = function() {
      newTimer();
    }
